<!DOCTYPE html>
<link rel="match" href="../expected/iframe-contains-scrollable-box-ref.html" />
<style>
    iframe {
        width: 300px;
        height: 200px;
        border: 1px solid #ccc;
    }
</style>
<iframe
    srcdoc="
    <!DOCTYPE html>
    <style>
        * {
            scrollbar-width: none;
        }
        body {
            margin: 0;
        }
        #scrollable-box {
            width: 300px;
            height: 200px;
            overflow-y: scroll;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        #scroll-space-filler {
            height: 300px;
        }
        #box {
            width: 50px;
            height: 50px;
            background-color: magenta;
        }
    </style>
    <div id='scrollable-box'>
        <div id='scroll-space-filler'></div>
        <div id='box'></div>
        <div id='scroll-space-filler'></div>
    </div>
    <script>
        const scrollable = document.getElementById('scrollable-box');
        scrollable.scrollTop = 300;
    </script>
"
></iframe>
